<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-03-21 12:23:58
 * @LastEditTime: 2022-04-20 09:49:00
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" name="" id="file">
</body>
<script>
  const file = document.querySelector('#file')
  file.addEventListener('change', async (e) => {
    const f = e.target.files[0]
    // console.log(URL.createObjectURL(f));
    const reader = new FileReader()
    reader.readAsDataURL(f)
    reader.addEventListener('load', (e) => {
      // console.log(reader.readAsDataURL(f))
      console.log(e.target.result);
    })
  })
</script>

</html>